<template>
    <section class="school">
        <el-row class="header">

            <div class="section" style="overflow: hidden">
                <div  class="head-left" style="display: flex;align-items: center">
                    <span class="school">{{formUnit.unit_name}}</span>
                    <span style="font-size:14px;color:#999"> 资料完善进度 {{info_complete}} / {{info_total}}</span>
                    <div  v-if="role === 0"  class="unit-info-manager">
                        <div>信息上报人: <span>{{itemForm.responsible_user_name|| '暂无'}}</span></div>
                        <div>联系方式: <span>{{itemForm.responsible_user_telephone || '暂无'}}</span></div>
                        <div>部门: <span>{{itemForm.responsible_user_belong_unit || '暂无'}}</span></div>
                        <div>职务: <span>{{itemForm.responsible_user_title|| '暂无'}}</span></div>
                        <el-button type="primary" plain @click="changeManagerDialog" size="mini">更改信息上报人</el-button>
                    </div>
                </div>
                <!--0：管理员，1：专家，2高校-->
                <el-button v-if="role !== 2" @click="$router.go(-1)">返回</el-button>
                <span v-if="role === 2 ">
                     <!--<el-button type="primary" v-if="disabled" @click="handleEdit">编辑</el-button>-->
                    <!--<el-button type="primary" v-else @click="disabled=true;">预览</el-button>-->
                </span>

                <el-button type="primary" v-if="role === 0" @click="editUniversiyInfo">编辑</el-button>

                <div class="unit-info-manager" style="text-align:left;display: table;width: 100%; padding:0 20px;">
                    <div>省份: <span>{{itemForm.provinces || '--'}} </span></div>
                    <div>城市: <span>{{itemForm.city || '--'}}</span></div>
                    <div v-if="itemForm.belong">高校所属: <span>{{ dict.belong[itemForm.belong].value || '--'}}</span></div>
                    <div v-if="itemForm.belong == 4">部委名称: <span>{{ itemForm.other_belong || '--'}}</span></div>
                    <div v-if="itemForm.arts_type">高校类型: <span>{{ dict.arts_type[itemForm.arts_type].value || '--'}}</span></div>
                </div>
            </div>
        </el-row>

        <el-row :gutter="20" class="info">

            <!--<el-col :span="2">
                <div class="">
                    <el-upload
                            class="avatar-uploader"
                            action="/common/upload"
                            :show-file-list="false"
                            :disabled="disabled"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">

                        <i v-else   class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span style="font-size:12px;" v-if="!disabled">点击上传标志</span>
                </div>
            </el-col>-->
            <el-col :span="24">

                <div class="" v-if="formUnit.college_info">
                    <item1 :formUnit="formUnit"
                           :is_disabled="disabled"
                           :expend="open"
                           :imageUrl="imageUrl"
                           @handleAvatarSuccess="handleAvatarSuccess"
                           @beforeAvatarUpload="beforeAvatarUpload"
                           @itemSave="itemSave"/>
                    <item2 :formUnit="formUnit" :is_disabled="disabled" :expend="open" @itemSave="itemSave"/>
                    <item3 :formUnit="formUnit" :is_disabled="disabled" :expend="open" @itemSave="itemSave"/>
                    <item4 :formUnit="formUnit" :is_disabled="disabled" :expend="open" @itemSave="itemSave"/>
                    <item5 :formUnit="formUnit" :is_disabled="disabled" :expend="open" @itemSave="itemSave"/>
                    <item6 :formUnit="formUnit" :is_disabled="disabled" :expend="open" @itemSave="itemSave"/>
                    <item7 :formUnit="formUnit" :is_disabled="disabled" :expend="open" @itemSave="itemSave"/>
                    <item8 :formUnit="formUnit" :is_disabled="disabled" :expend="open" @itemSave="itemSave"/>
                    <item9 :formUnit="formUnit" :is_disabled="disabled" :expend="open" @itemSave="itemSave"/>
                    <item10 :formUnit="formUnit" :is_disabled="disabled" :expend="open" @itemSave="itemSave"/>
                    <item11 :formUnit="formUnit" :is_disabled="disabled" :expend="open" @itemSave="itemSave"/>
                    <item0 :formUnit="formUnit" :is_disabled="disabled" :expend="open" @itemSave="itemSave" @adminExprot="adminExprot"/>

                </div>
            </el-col>

        </el-row>


        <el-dialog title="更信息上报人"  :visible.sync="infoManagerDialogVisible"
                   width="600px" :before-close="infoManagerDialogHandleClose">
            <el-form :model="changeInfoManagerForm" label-width="100px" class="demo-fundProduct" style="max-width:300px;">
                <el-form-item label="信息上报人:" prop="user_id"  >
                    <el-select filterable v-model="changeInfoManagerForm.responsible_user_id" clearable　placeholder="请选择新的上报人">
                        <el-option :key="item.id" :label="item.full_name" :value="item.id"
                                   v-for="(item) in userOptionsList"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="infoManagerDialogVisible = false"> 取 消 </el-button>
                <el-button type="primary" @click="changeManagerSubmit"> 确 认 </el-button>
              </span>
        </el-dialog>

        <el-dialog :title="dialogTitle" v-loading="dialogLoading" :visible.sync="dialogVisible"
                   width="600px" :before-close="handleClose">
            <el-form :model="itemForm" :rules="itemRules" ref="itemForm" label-width="100px" class="demo-fundProduct">
                <el-row>
                    <el-col :span="20" :push="1">
                        <el-input type="hidden" v-model="itemForm.id"></el-input>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="8" :push="1">
                        <el-form-item label="高校logo:">
                            <el-upload
                                    class="avatar-uploader"
                                    action="/common/upload"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">

                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                            <span style="font-size:12px;margin-top:-20px;">点击上传标志</span>
                        </el-form-item>

                    </el-col>
                </el-row>


                <el-row>
                    <el-col :span="20" :push="1">
                        <el-form-item label="高校名称:" prop="unit_name">
                            <el-input placeholder="请输入高校名称" type="text" v-model="itemForm.unit_name"></el-input>
                        </el-form-item>
                        <el-form-item label="省市:" prop="provinces" style="width:260px">
                           <!-- <el-select filterable v-model="itemForm.provinces" clearable　placeholder="">
                                <el-option :key="item" :label="item" :value="item"
                                           v-for="(item) in dict.provinces"></el-option>
                            </el-select>-->
                            <el-cascader
                                    　placeholder="请选择所在省市"
                                    v-model="selecetProvincCity"
                                    :options="dict.provinc_city"
                                    :props="provincCityProps"
                                    @change="provincCityChange"></el-cascader>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="高校所属:" prop="belong" style="width:260px">
                            <el-select filterable v-model="itemForm.belong" clearable　placeholder="请选择高校所属部署">
                                <el-option :key="item.key" :label="item.value" :value="item.key"
                                           v-for="(item) in dict.univ_department"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="部委名称"  prop="other_belong" v-if="itemForm.belong == 4">
                            <el-input v-model="itemForm.other_belong" placeholder="请输入其他部委名称"></el-input>
                        </el-form-item>
                        <el-form-item label="高校类型:" prop="arts_type" style="width:260px">
                            <el-select filterable v-model="itemForm.arts_type" clearable　placeholder="请选择高校所属类型">
                                <el-option :key="item.key" :label="item.value" :value="item.key"
                                           v-for="(item) in dict.univ_pro"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div slot="footer" class="dialog-footer">

                <el-button type="primary" @click="handleAdminUpdate">保 存
                </el-button>
                <el-button @click="handleClose">取 消</el-button>

            </div>

        </el-dialog>
    </section>
</template>

<script>
    import * as api from '../../api/auth_api.js';
    import { saveAs } from '../../common/js/commons';
    import {isNullTrue} from "../../common/js/commons";
    import dict from '../../common/js/dict'
    import item0 from './componets/item0'
    import item1 from './componets/item1'
    import item2 from './componets/item2'
    import item3 from './componets/item3'
    import item4 from './componets/item4'
    import item5 from './componets/item5'
    import item6 from './componets/item6'
    import item7 from './componets/item7'
    import item8 from './componets/item8'
    import item9 from './componets/item9'
    import item10 from './componets/item10'
    import item11 from './componets/item11'

    export default {
        components: {
            item0,
            item1,
            item2,
            item3,
            item4,
            item5,
            item6,
            item7,
            item8,
            item9,
            item10,
            item11,
        },
        data() {
            var validName = (rule, value, callback) => {
                let reg = /^[a-zA-Z\u4e00-\u9fa5]{1,30}$/;
                if (!reg.test(value)) {
                    callback(new Error('30位以内的汉字或字母'));
                } else {
                    callback();
                }
            };
            return {
                //dialog
                open: true,
                dialogVisible: false,
                infoManagerDialogVisible: false,
                dialogLoading: false,
                dialogTitle: '编辑',
                userOptionsList:[],
                selecetProvincCity:[],
                changeInfoManagerForm: {
                    responsible_user_id: ''
                },
                provincCityProps:{
                    value:'name',
                    label:'name',
                    children:'city'
                },
                itemForm: {
                    id: '',
                    unit_name: '',
                    provinces: '',
                    belong: '',
                    arts_type: '',
                },
                itemRules: {
                    unit_name: {required: true, message: '请输入30位以内的汉字或字母', validator: validName, trigger: 'blur'},
                    provinces: {required: true, message: '请选择高校所属省份', trigger: 'change'},
                    belong: {required: true, message: '请选择高校所属', trigger: 'change'},
                    other_belong: {required: true, message: '请输入部委名称', trigger: 'blur'},
                    arts_type: {required: true, message: '请选择高校所属类型', trigger: 'change'}
                },

                dict: dict,
                college_info: {
                    progress: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    /***********学校概况*****************/
                    basic_param1: '',// 学校占地
                    basic_param2: '',//校区个数
                    basic_param3: '',//各小区名称 用分号隔开
                    basic_param4: '',//科研实验室数量
                    basic_param5: '',//在职教工人数
                    basic_param6: '',//教学实验室数量
                    basic_param7: '',//在校本科人数
                    basic_param8: '',//仪器设备数量
                    basic_param9: '',//在校研究生人数
                    basic_param10: '',//仪器设备资产总值
                    basic_param11: '',//涉及实验室工作的师生总人数
                    /***********组织体系*****************/
                    organization_param1: '',//校级实验室领导机构以及人员组成与职级
                    organization_param1_list: [{value: ''}],//人员列表
                    organization_param2: '',//实验室安全管理主管智能部门名称
                    organization_param3: '',//专兼职管理人员总计
                    organization_param4: '',//校级专职人数
                    organization_param5: '',//校级兼职人数
                    organization_param6: '',//院系专职人数
                    organization_param7: '',//院系兼职人数
                    organization_param8: '',//经费投入常规预算 万元
                    organization_param9: '',//近三年专项投入合计 万元
                    /***********实验室类别*****************/
                    type_param1: '', //化学实验室个数
                    type_param2: '', //辐射实验室个数
                    type_param3: '', //生物/生化实验室个数
                    type_param4: '', //机电类实验室个数
                    type_param5: '', //特种设备类实验室
                    type_param6: '', //其他类实验室
                    type_param7: '', //教学实验室个数
                    type_param8: '', //公共平台实验室个数 校级
                    type_param9: '', //公共平台实验室个数 院系级
                    type_param10: '', // 科研实验室
                    type_param11: '', //房间数共

                    /***********管理制度*****************/
                    rule_param1: '',//是否建立校级实验室安全管理制度
                    rule_param2: '',//是否建立具有院系特色的实验室安全管理制度
                    rule_param3: '',//学校是否有明确的实验室安全奖惩制度
                    rule_param4: '',//学校是否逐级签订安全责任书
                    rule_param5: '',//是否有各级预案目录
                    rule_param6: '',//制度目录清单

                    /***********基础设施*****************/
                    facilities_param1: '',//有无危险品仓库
                    facilities_param2: '',//管理部门
                    facilities_param3: '',//有无危废中转站
                    facilities_param4: '',//管理部门
                    facilities_param5: '',//有无实验室安全管理系统
                    facilities_param6: '',//管理部门
                    facilities_param7: '',//有无危险品全过程管理系统
                    facilities_param8: '',//管理部门

                    /***********实验室资质*****************/
                    qualification_param1: '',//辐射安全许可证实验室数量
                    qualification_param2: '',//办理辐射和面证书设备的数量
                    qualification_param3: '',//近三年辐射源报废的数量
                    qualification_param4: '',//备案实验室个数
                    qualification_param5: '',//证书实验室数量
                    qualification_param6: '',//安全资质情况

                    /***********实验废弃物*****************/
                    is_waste_param: '',//是否有实验废物产生？
                    waste_param1: '',//化学危险废弃物量
                    waste_param2: '',//处理方式
                    waste_param3: '',//生物危险废弃产量
                    waste_param4: '',//处理方式
                    waste_param5: '',//放射性危险废弃物
                    waste_param6: '',//处理方式

                    /***********管制类化学采购品采购情况*****************/
                    is_purchase_param: '',//是否已采购管制类化学品？
                    purchase_param1: '',//剧毒品
                    purchase_param2: '',//品名
                    purchase_param3: '',//易制毒品
                    purchase_param4: '',//品名
                    purchase_param5: '',//易制爆品
                    purchase_param6: '',//品名
                    purchase_param7: '',//爆炸品
                    purchase_param8: '',//品名
                    purchase_param9: '',//精麻类药品
                    purchase_param10: '',//品名

                    /***********教育培训与检查*****************/
                    train_param1: '',//是否进行安全文化建设
                    train_param2: '',//文化建设方式
                    train_param3: '',//是否有网络考试系统
                    train_param4: '',//考试对象 分号隔开
                    train_param5: '',//是否每年展开培训
                    train_param6: [''],//开必修课
                    train_param7: '',//其他
                    train_param8: '',//是否开展应急演练
                    train_param9: '',//类别与频次
                    train_param10: '',//时间内容
                    train_param11: '',//是否建立校级定期安全检查制度
                    train_param12: '',//检查频率
                    train_param13: [''],//6.学校检查结果告知方式
                    train_param14: '',//其他
                    train_param15: '',//消防结果通知方式

                    /***********近三年学校实验室安全事故统计*****************/
                    is_accident_param: '',//近三年是否有学校实验室安全事故发生
                    accident_param1: '',//安全事故次数
                    accident_param2: '',//死亡人数
                    accident_param3: '',//重伤人数
                    accident_param4: '',//轻伤人数
                    accident_param5: '',//经济损失
                    accident_param6: '',//化学安全事故
                    accident_param7: '',//辐射安全事故
                    accident_param8: '',//生物安全事故
                    accident_param9: '',//特种设备安全事故
                    accident_param10: '',//设施设备类事故
                    accident_param11: '',//其他
                    accident_param12: '',//其他次
                    accident_param13: '',//说明情况


                    /***********对高校科研实验室安全工作建议*****************/
                    note: '',//说明情况


                    /***********附件*****************/
                    file_list_a: [],
                    file_list_b: [],
                    file_list_c: []
                },
                disabled: true,
                imageUrl: '',

                formUnit: {

                    name: '清华大学',
                    college_info: {
                        progress: [],
                    }

                }
            }
        },
        computed: {
            info_complete() {
                if (!this.formUnit.college_info.progress) {
                    return 0
                }
                let arr
                arr = this.formUnit.college_info.progress.filter((val) => {
                    return val === '1'
                })
                return arr.length
            },
            info_total() {
                if (!this.formUnit.college_info.progress) {
                    return 0
                }
                return this.formUnit.college_info.progress.length
            },
            role() {
                let role_name = this.$store.state.userInfo.role_name || ''

                let role = 0

                //0：管理员，1：专家，2高校
                if (role_name.indexOf("管理员") > -1 || role_name.indexOf("教育部") > -1) {
                    role = 0
                } else if (role_name.indexOf("高校") > -1) {
                    role = 2
                } else {
                    role = 1
                }
                return role
            },
            unit_id() {
                let ids = null
                if (this.role === 2) {

                    ids = this.$store.state.userInfo.unit_id
                } else {

                    ids = this.$route.params.id
                }
                return ids
                // return this.$router.params.id || this.$store.state.userInfo.unit_id
            }
        },
        created() {

        },
        methods: {
            handleClose() {
                this.dialogVisible = false
                this.selecetProvincCity = []
            },
            handleAdminUpdate() {
                this.$refs['itemForm'].validate((valid) => {
                    if (valid) {
                        api.updateUniversity(this.itemForm).then(res => {
                            this.dialogVisible = false
                            if (res.data.status == 200) {
                                this.$message({
                                    type: 'success',
                                    message: '保存成功!'
                                });
                                this.disabled = true
                                this.getInfo()
                            } else {
                                if (res.data.status == 401) {
                                    this.$router.push('/login');
                                }
                                this.$message.error(res.data.msg);
                                this.dialogVisible = false;
                            }
                        })

                    }
                })
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);

                this.formUnit.unit_logo = {
                    id: JSON.parse(res.datas).id
                }
                this.itemForm.unit_logo = {
                    id: JSON.parse(res.datas).id
                }


            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    // this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isLt2M;
            },


            handleEdit() {
                this.disabled = false
            },
            handleSave() {
                this.disabled = true
            },

            getInfo() {
                api.universityInfo({id: this.unit_id}).then((res) => {
                    let data = JSON.parse(res.data.datas)
                    if (data.college_info === null) {
                        data.college_info = this.college_info
                    }

                    if (!data.college_info.progress) {
                        data.college_info.progress = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
                    }
                    if (!data.college_info.organization_param1_list) {
                        data.college_info.organization_param1_list = [{value: ''}]
                    }

                    if (!data.college_info.file_list_a) {
                        data.college_info.file_list_a = []
                    }
                    if (!data.college_info.file_list_b) {
                        data.college_info.file_list_b = []
                    }
                    if (!data.college_info.file_list_c) {
                        data.college_info.file_list_c = []
                    }
                    if (!(data.college_info.train_param6 instanceof Array)) {

                        data.college_info.train_param6 = ['']
                    }
                    if (!(data.college_info.train_param13 instanceof Array)) {
                        data.college_info.train_param13 = ['']
                    }


                    this.formUnit = Object.assign({}, data)
                    this.itemForm = {
                        id: data.id,
                        unit_name: data.unit_name,
                        provinces: data.provinces,
                        city: data.city,
                        unit_logo: data.unit_logo,
                        belong: data.belong,
                        other_belong: data.other_belong,
                        arts_type: data.arts_type,
                        responsible_user_telephone: data.responsible_user_telephone,
                        responsible_user_title: data.responsible_user_title,
                        responsible_user_name: data.responsible_user_name,
                        responsible_user_belong_unit: data.responsible_user_belong_unit,
                    }
                    this.selecetProvincCity = [ this.itemForm.provinces, this.itemForm.city]
                    if (this.formUnit.unit_logo) {
                        this.imageUrl = this.formUnit.unit_logo.path
                    }


                })
            },
            itemSave(data, index) {
                this.formUnit = data

                // this.formUnit.college_info.progress[index] = '1'
                this.$set(this.formUnit.college_info.progress, index, '1')
                // let arr = this.formUnit.college_info.progress

                this.$forceUpdate()
                this.updataInfo()
            },
            updataInfo() {
                api.updateUniversity(this.formUnit).then(res => {
                    if (res.data.status == 200) {
                        this.$message({
                            type: 'success',
                            message: '保存成功!'
                        });
                        this.disabled = true
                        this.$forceUpdate()
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.msg);
                        this.dialogVisible = false;
                    }
                })

            },
            changeManagerDialog(){
                this.infoManagerDialogVisible = true
            },
            changeManagerSubmit(){
                let params = this.changeInfoManagerForm
                    params.id = this.unit_id
                api.updateInfoManager(params).then(res => {
                    if(res.status == 200){
                        if(res.data.status == 200){
                            this.infoManagerDialogVisible = false
                            this.changeInfoManagerForm.responsible_user_id = ''
                            this.$message.success(res.data.msg);
                            this.getInfo()
                        }else{
                            if (res.data.status == 401) {
                                this.$router.push('/login');
                            }
                            this.$message.error(res.data.msg);
                        }
                    }
                })
            },
            infoManagerDialogHandleClose(){

            },
            initData() {
                // this.initYears();

                clearInterval(this.timer)
                if (this.unit_id) {
                    this.getInfo();
                    this.getUnitUserList()
                } else {
                    this.timer = setInterval(this.initData, 100)
                }
            },
           getUnitUserList() {
               //获取学校用户列表
               let param = {
                   condition:{
                       unit_id: this.unit_id
                   },
                   page_size:1000,
                   page_current:1

               }//获取用户
               api.userInfoOnPage(param).then(res => {
                   if (res.status == 200) {
                        if(res.data.status == 200){
                            let tempData = JSON.parse(res.data.datas)
                            this.userOptionsList = tempData.items || []
                        }
                   }
               })
           },
            provincCityChange(val){
                this.itemForm.provinces = val[0]
                this.itemForm.city = val[1]
            },
            editUniversiyInfo(){

                if(this.itemForm.provinces && this.itemForm.city)
                    this.selecetProvincCity = [ this.itemForm.provinces, this.itemForm.city]
                else
                    this.selecetProvincCity = []
                this.dialogVisible = true
            },
            adminExprot(){
                api.exportSafeCheckItemTemplate('').then(res => {
                    if(res.status == 200 && res.data.status == 200){
                        console.log('exprot',res.data.datas)
                        saveAs(res.data.datas,'高校实验室安全管理情况调查表')
                        // var binaryData = [];
                        // binaryData.push(res.datas);
                        // window.URL.createObjectURL(new Blob(binaryData, {type: "application/doc"}))
                    }
                })
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.initData()
            })
        }

    }
</script>
<style>
    .el-form-item__label {
        color: #666;
    }

    .el-upload-list--text.is-disabled {
        margin-top: -30px
    }

    .el-input.is-disabled .el-input__inner, .el-textarea.is-disabled .el-textarea__inner {
        /*background-color:#fff;*/
        border-color: #fff;
        color: #999;
        cursor: text;
    }

    .el-radio__input.is-checked.is-disabled .el-radio__inner {
        border-color: #409EFF;
        background: #409EFF;
    }

    .el-radio__input.is-disabled + span.el-radio__label {
        color: #333
    }

    .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
        border-color: #fff
    }

    .el-radio__inner::after {
        background: #fff !important;
    }

    .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
        background-color: #409EFF;
        border-color: #409EFF;

    }

    .el-form--inline .el-form-item {
        margin-right: 20px;
    }

    .item {
        padding-left: 20px;
    }

    /*.el-input.is-disabled .el-input__suffix{display:none}*/
</style>
<style scoped  lang="scss">


    .box-card .title {
        background: #ddd;
        padding-left: 20px;
        margin-bottom: 20px;
    }

    .school {
        padding: 0 20px;
    }

    .info .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }

    .info .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }

    /*  .info .el-upload{
          position:relative;
      }
      .info .el-upload .el-icon-plus{
          position:absolute;
          z-index: 100;
          top:0;

      }*/

    .header {
        text-align: right;
    }

    .section {
        margin: 15px 0;
        border-bottom: solid 1px #ccc;
        padding: 15px 0 20px;
    }

    .head-left {

        float: left;
    }

    .school {
        font-size: 16px;
        color: #000;
        /*margin-top:20px;*/

    }

    .avatar {
        width: 80px;
        height: 80px;
        display: block;
    }

    .info {
        padding: 20px 0;

        /*border-bottom: solid 1px #ccc;*/
    }
    .unit-info-manager{
        padding:0 0 0 50px;
        div{
           display:inline-table;
            padding:0 25px 0 0;
            font-size:14px;
            color:#666;
            span{
                color:#333;
            }
        }
    }
</style>
